{include file="public/head"/}
<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>
    <div class="ntDesktop">
        <div class="ntDesktop-head">{:lang('accounting_subject')}</div>
        <div class="row input-panel">
            <div class="col-md-1">
                <label>{:lang('country')}<span class="required"></span></label>
                <select class="form-control" v-model="data.country_id" @change="changecountry">
                    <option value="1">{:lang('BRAZIL')}</option>
                    <option value="2">{:lang('CHINA')}</option>
                </select>
            </div>
            <div class="col-md-2">
                <label>{:lang('subject_name')}<span class="required"></span></label>
                <div class="input-group">
                    <div class="input-group-btn">
                        <select class="form-control" v-model="data.pid" v-cloak>
                            <option value="0">{:lang('top_subject')}</option>
                            <option :value="item.id" v-for="(item,index) in finaccounts">
                                <template v-for="(item,index) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>
                                {{item.name}}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <label>{:lang('name')}<span class="required"></span></label>
                <input type="text" v-model="data.name" class="form-control">
            </div>
            <div class="col-md-2">
                <label>{:lang('adjustment')}<span class="required"></span></label>
                <select v-model="data.adjust" class="form-control">
                    <option :value="0">= {:lang('income')}</option>
                    <option :value="1">+ {:lang('income')}</option>
                    <option :value="2">- {:lang('expenditure')}</option>
                </select>
            </div>
            <div class="col-md-1 text-right" style="padding-top:1.6em">
                <button type="submit" class="btn btn-primary" @click="subfun">
                    <span class="glyphicon glyphicon-floppy-disk"></span> {:lang('save')}
                </button>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#" data-toggle="tab" @click="changecoun('2')">{:lang('CHINA')}</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="tab" @click="changecoun('1')">BRASL</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th style="width:40vw"> {:lang('subject_name')}</th>
                        <th> {:lang('adjustment')}</th>
                        <th> {:lang('designated_function')}</th>
                        <th> {:lang('edit')}</th>
                        <th> {:lang('operate')}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id" v-if="item.isshow">
                        <td align="center">{{item.id}}</td>
                        <td style="padding-left:0em">

                            <a href="javascript:;" @click="menuchange(item.id,item.toggle)">
                                <span v-html="item.level"></span>
                                <i style="display: inline-block;width: 16px;height: 16px;">
                                    <span href="javascropt:;" v-if="item.isexist==1 && item.toggle"><span class="glyphicon glyphicon-minus"
                                                                                       style="margin-right:0"></span></span>
                                    <span href="javascropt:;" v-if="item.isexist==1 && !item.toggle"><span class="glyphicon glyphicon-plus"
                                                                                        style="margin-right:0"></span></span>
                                </i>
                                {{item.name}}
                            </a>
                        </td>
                        <td align="center"> {{item.adjust}}</td>
                        <td> {{item.positioname}}</td>
                        <td> {{item.updatename}} <br/>
                            <small>{{item.update_date}}</small>
                        </td>
                        <td class="text-right">
                            <div>
                                <button @click="editdata(item.id)" class='btn btn-sm btn-primary'><span
                                        class="glyphicon glyphicon-pencil"></span>
                                    {:lang('edit')}
                                </button>
                                <a :href="'/admin/finance/setfinaccroot?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal"
                                   data-target="#position_setModal"><span class="fa fa-tasks"></span> {:lang('designated_function')}</a>
                                <a href="#" @click.prevent="delfinaccount(item.id,item.name)"
                                   class='btn btn-sm btn-default option-del'><span
                                        class="glyphicon glyphicon-remove"></span> {:lang('delete')}</a>
                            </div>
                        </td>
                    </tr>
                    <tr style="text-align: center;" v-if="list.length==0">
                        <td colspan="6">{:lang('no_data')}</td>
                    </tr>
                    </tbody>
                </table>
                <ul class="pagination" id="pagination">
                </ul>
            </div>
        </div>
    </div>
</div>
<!--指定权限设置 开始-->
<div class="modal fade" id="position_setModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--弹窗部分 结束-->
{include file="public/foot"/}
<script>
    var table = new Vue({
        el: '.ntDesktop',
        data: {
            list: [],
            page: 1,
            pageSize: 2,
            iftijiao: true,
            data: {
                country_id: '2',
                pid: '0',//上级目录
                name: '',//名称
                id: '',//编辑id
                act: '',//提交标志
                adjust: '0',//调整状态
            },
            finaccounts: [],//上级目录
            counid: '2',//标签切换
        },
        methods: {
            setPage(pageCurrent, pageSum) {
                //数据总条数
                var myPageCount = pageSum;
                //一页显示多少条
                var myPageSize = this.pageSize;
                //总页数
                var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
                $.jqPaginator('#pagination', {
                    totalPages: parseInt(countindex),
                    //最多显示多少页
                    visiblePages: 5,
                    //默认显示第几页
                    currentPage: pageCurrent,
                    first: '<li class="first"><a href="javascript:;">'+langcon.page_home+'</a></li>',
                    prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>'+langcon.previous_page+'</a></li>',
                    next: '<li class="next"><a href="javascript:;">'+langcon.next_page+'<i class="arrow arrow3"></i></a></li>',
                    last: '<li class="last"><a href="javascript:;">'+langcon.last_page+'</a></li>',
                    page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                    all:'<li class="page"><a href="javascript:;">'+parseInt(countindex)+' / '+this.page+'PG , '+this.pageSize+' /PG</a></li>',
                    onPageChange: (num, type) => {
                        if (type == "change") {
                            this.page = num
                            this.getAllList()
                        }
                    }
                });
            },
            //数据所有获取
            getAllList(){
                $.ajax({
                    url: "/admin/finance/finaccount",
                    type: 'post',
                    data: {
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                        country_id: this.counid,//标签切换
                        getfinaccount: '',
                    },
                    dataType: "json",
                    success: (result) => {
                        this.list = result.getfinaccount;
                        this.list.map((item) => {
                            item.isshow = true
                            item.toggle = true
                        })
                        if (result.size / this.pageSize > 1) {
                            $('#pagination').show()
                            this.setPage(parseInt(this.page), result.size)
                        } else {
                            $('#pagination').hide()
                        }
                    }
                })
            },
            //折线的是否显示
            menuchange(id, toggle){
                this.list = this.list.map((item) => {
                    if (item.pid == id) {
                        item.isshow = !toggle
                        if (this.list.some((child) => {
                                return child.id == item.id
                            })) {
                            this.menuchange(item.id, toggle)
                        }
                    }
                    if (item.id == id) {
                        item.toggle = !toggle
                    }
                    return item
                })
            },
            //标签切换
            changecoun(counid){
                this.counid = counid;
                this.page = '1';
                this.getAllList();
            },
            //删除
            delfinaccount(id, name){
                $.ajax({
                    url: '/admin/finance/finaccountdel',
                    type: 'post',
                    data: {
                        id,
                        name
                    },
                    success: (res) => {
                        res = JSON.parse(res)
                        change_mes_type('.alert',res.status)
                        if (res.status != 1) {
                            $('.alert').show()
                            $('.alert p').html('*' + res.msg + '<br>')
                            //toastr.warning(res.msg);
                        } else {
                            $('.alert').show()
                            $('.alert p').html('*' + res.msg + '<br>')
                            if (!(this.list.length - 1)) {
                                if(this.page>1){
                                    this.page--
                                }
                            }
                            this.getAllList()
                        }
                    }
                })
            },
            //改变国家获取对应的上级目录
            changecountry(){
                this.getfinaccount();
            },
            getfinaccount(){
                $.ajax({
                    url: '/admin/finance/finaccount',
                    data: {
                        country_id: this.data.country_id,
                        finaccounts: '',
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        this.finaccounts = data;
                    }
                })
            },
            //保存数据
            subfun(){
                if (this.iftijiao) {
                    if (this.data.id) {
                        this.data.act = 'finaccountedit'
                    } else {
                        this.data.act = 'finaccountadd'
                    }
                    var data = {
                        act: this.data.act,
                        id: this.data.id,
                        country_id: this.data.country_id,
                        pid: this.data.pid,
                        name: this.data.name,
                        adjust: this.data.adjust,
                    }
                    $.ajax({
                        url: '/admin/finance/' + this.data.act,
                        data,
                        type: 'post',
                        success: (data) => {
                            data = JSON.parse(data)
                            change_mes_type('.alert',data.status)
                            if (data.status != 1) {
                                $('.alert').show()
                                $('.alert p').html('*' + data.msg + '<br>')
                            } else {
                                //清空数据
                                this.data.pid = '0';
                                this.data.name = '';
                                this.data.adjust = '0',
                                    this.iftijiao = false
                                $('.alert').show()
                                $('.alert p').html('*' + data.msg + '<br>')
                                this.getAllList();//获取列表数据
                            }
                        }
                    })
                }

            },
            //点击编辑,请求接口，渲染数据
            editdata(id){
                $.ajax({
                    url: '/admin/finance/finaccountedit',
                    data: {
                        id: id,
                        getfinaccount: '',
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if(data.status!=1){
                            change_mes_type('.alert',data.status)
                            $('.alert').show()
                            $('.alert p').html('*' + data.msg + '<br>')
                        }else {
                            this.data.country_id = data.country_id;
                            this.data.pid = data.pid;
                            this.data.name = data.name;
                            this.data.adjust = data.adjust;
                            this.data.id = data.id;
                            this.getfinaccount();//获取上级科目
                        }
                    }
                })
            }
        },
        created(){
            this.getAllList();//获取列表数据
            this.getfinaccount();//获取上级科目
            $('#position_setModal').on('hide.bs.modal', () => {
                this.getAllList()
            })
        }
    })
    //替换之前的模板
    $("#position_setModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(document).unbind('keydown')
    });
</script>
